<template>
  <div class="scroll-x-wrap">
    <div class="wrap">
      <div class="item text-over" 
        @click="changeTab('')">
          <div class="list flex-row all" :class="{cur: !params.shopTypeId}">
            全部商品
            <el-tooltip class="item" effect="dark" content="右键下方分类可以修改和删除分类" placement="top-start">
              <el-button type="text" icon="el-icon-question"></el-button>
            </el-tooltip>
            <div class="btn flex-row-ver" @click.stop="addClass()">
              <i class="el-icon-circle-plus"></i>
            </div>
          </div>
        </div>
      <div class="item text-over" 
        v-for="(item, index) in classList" :key="index"
        @contextmenu.prevent="setClass($event,item)"
        @click="changeTab(item.id)">
        <div class="list" :class="{'cur': item.id === params.shopTypeId}">{{item.name}}</div>
      </div>
    </div>
    <div class="right-click-wrap"
      @click.stop v-if="showClass"
      :style="{'left': left+'px', top: top+ 'px'}">
      <div class="center">
        <el-button type="text" @click="editClass()">修改此分类</el-button>
      </div>
      <div class="center">
        <el-button type="text" @click="deleteClass()">删除此分类</el-button>
      </div>
     <div class="center border-top">
        <el-button type="text"  @click="addClass()" style="color: #03a9f4;">新增分类</el-button>
      </div>
    </div>
    <el-dialog :title="(editId ? '修改' : '新增')+'分类'" 
        width="500px"
        v-dialogDrag
        :visible.sync="dialogTableVisible">
      <el-form :model="$data" ref="ruleForm" label-width="100px" size="mini">
        <el-form-item prop="name" label="分类名称"
          :rules="[ {required: true, message: '分类名称不能为空', trigger: 'blur'},
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'} ]">
          <el-input v-model="name" placeholder="请输入分类名称" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="issubmitLoading" @click="submitForm('ruleForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import * as api from '@/api/sc_goods'
  export default {
    props: {
      params: Object,
      defalut: () => {}
    },
    data() {
      return {
        curRight: {}, // 右键的分类
        top: 0, // 右侧菜单位置
        left: 0,
        showClass: false, // 右键弹窗容器是否显示
        dialogTableVisible: false, // 编辑分类
        issubmitLoading: false, // 提交分类按钮loading
        editId: null, // 要编辑的分类
        name: '',
        classList: [], // 分类列表
        businessid: '', // 商家id
      }
    },
    methods: {
      changeTab(id) { // 切换分类
        this.params.shopTypeId = id
        this.$emit('changeClass')
      },
      setClass($el,row) { // 右键显示菜单
        this.left = $el.clientX
        this.top = $el.clientY
        this.curRight = row
        this.showClass = true
      },
      addClass() { // 新增分类
        this.name = ''
        this.editId = null
        this.showClass = false
        this.dialogTableVisible = true
      },
      editClass() { // 编辑分类
        this.editId = this.curRight.id
        this.name = this.curRight.name
        this.showClass = false
        this.dialogTableVisible = true
      },
      deleteClass() { // 删除分类
        this.showClass = false
        this.$confirm(`是否删除分类【${this.curRight.name}】`, '提示').then(() => {
          this.deleteGoodsClass()
        }).catch(() => { })
      },
      getGoodsClassList(businessid) { // 店内分类列表
        api.goodsClassSelect({businessid}).then(res => {
          if (res.success) {
            this.classList = res.data
          }
        })
      },
      deleteGoodsClass() { // 删除店内分类
        const params = { businessid: this.businessid, id: this.curRight.id }
        api.goodsClassDelete(params).then(res => {
          if (res.success) {
            this.getGoodsClassList(params.businessid)
          }
        })
      },
      submitForm(formName) { // 提交分类
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.issubmitLoading = true
            const params = { 
              businessid: this.businessid,
              name: this.name
            }
            if (this.editId) {
              params.id = this.editId
              api.goodsClassUpdata(params).then(res => {
                if (res.success) {
                  this.dialogTableVisible = false
                  this.getGoodsClassList(params.businessid)
                }
              }).finally(() => { this.issubmitLoading = false })
            } else {
              api.goodsClassSave(params).then(res => {
                if (res.success) {
                  this.dialogTableVisible = false
                  this.getGoodsClassList(params.businessid)
                }
              }).finally(() => { this.issubmitLoading = false })
            }
          }
        })
      }
    },
    mounted() {
      this.businessid = this.$route.query.id || ''
      this.getGoodsClassList(this.businessid)
      document.addEventListener('click',e => {
        this.showClass = false
      },false)
    }
  }
</script>
<style lang="scss" scoped>
  .scroll-x-wrap{
    width: 160px;
    position: relative;
    user-select: none;
    .wrap{
      top: 0;
      left: 0;
      z-index: 99;
      position: absolute;
      .item{
        cursor: pointer;
        width: 160px;
        display: flex;
        align-items: center;
        font-size: 14px;
        position: relative;
        color: #7d7e80;
        height: 40px;
        line-height: 40px;
        .list{
          width: 100%;
          height: 20px;
          padding:0 10px;
          line-height: 20px;
          box-sizing: border-box;
          &.all{
            justify-content: space-between;
            .btn{
              width: 40px;
              height: 40px;
              i{
                color: #03a9f4;
                font-size: 20px;
              }
            }
          }
          &.cur{
            font-weight: bold;
            color:$--color-primary;
            border-left: 2px solid $--color-primary;
          }
        }
      }
    }
    .right-click-wrap{
      position: fixed;
      width: 100px;
      z-index: 9999;
      padding: 10px 15px;
      border-radius: 5px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 5px 0px #ccc;
      .center{
        line-height: 30px;
        text-align: center;
        &.border-top{
          border-top: 1px solid #ccc;
        }
      }
    }
  }
</style>

